<template>
  <!-- 下拉刷新 -->
  <van-pull-refresh
    v-model="isLoading"
    @refresh="onRefresh"
    id="ShopShopShopShop"
    :ddd="scrollTop"
  >
    <!-- 上拉加载更多 -->
    <van-list
      class="shopBox"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <van-cell class="list" v-for="item in goodsList" :key="item.dealid">
        <!-- <img :src="item.pic" alt="" /> -->
        <img v-lazy="item.pic" alt="" />
        <h3>{{ item.title }}</h3>
        <p>
          &yen;{{ item.price }}
          <u>&yen; {{ item.value }}</u>
        </p>
        <van-icon name="cart-o" @click="addtocart(item)" />
      </van-cell>
    </van-list>
  </van-pull-refresh>
  <van-action-bar>
    <van-action-bar-icon
      icon="cart-o"
      text="购物车"
      :badge="total"
      @click="$router.push({ name: 'cart' })"
    />
  </van-action-bar>
</template>
<script>
import { Toast } from "vant";
import { mapMutations, mapGetters } from "vuex";
import { getgoodsAPI } from "@/api/shop.js";
export default {
  name: "shop",
  data() {
    return {
      Totaldata: [],
      goodsList: [],
      loading: false,
      finished: false,
      lastnext: 10,
      isLoading: false,
      scrollTop: 0,
    };
  },
  beforeRouteLeave(to, from, next) {
    from.meta.top = window.scrollY;
    next();
  },
  computed: {
    ...mapGetters("m_cart", ["total"]),
  },
  created() {
    // console.log(this.$route.meta)
    this.getgoodsFun();
  },
  methods: {
    ...mapMutations("m_cart", ["addTOCart"]),
    async getgoodsFun() {
      const { data: res } = await getgoodsAPI();
      // console.log(res.data)
      this.Totaldata = [...res.data];
      this.goodsList = this.Totaldata.slice(0, 10);
      //   this.lastnext++
      //   this.goodsList = [...res.data]
    },
    loadmore(isRefresh) {
      // console.log(this.Totaldata)
      //   this.lastnext
      //   let nextnum = this.lastnext * 6
      //  console.log(nextnum)
      if (isRefresh) {
        this.goodsList = [
          ...this.Totaldata.slice(this.lastnext, (this.lastnext += 6)),
          ...this.goodsList,
        ];
        this.isLoading = false;
      } else {
        this.goodsList = [
          ...this.goodsList,
          ...this.Totaldata.slice(this.lastnext, (this.lastnext += 6)),
        ];
        this.loading = false;
      }

      //   console.log(this.goodsList)

      if (this.goodsList.length >= 150) {
        this.finished = true;
      }
    },
    onLoad() {
      //上拉加载
      this.loadmore();
    },
    onRefresh() {
      //下拉刷新
      this.loadmore(true);
    },
    //加入购物车
    addtocart(item) {
      // alert(dealid)
      const goods = {
        goods_id: item.dealid, // 商品的Id
        goods_name: item.title, // 商品的名称
        goods_price: item.price, // 商品的价格
        goods_count: 1, // 商品的数量
        goods_pic: item.pic, // 商品的图片
        goods_state: true, // 商品的勾选状态
      };
      this.addTOCart(goods);
      Toast("添加成功");
      // console.log(goods)
    },
  },
};
</script>
<style lang="less" scoped>
.van-pull-refresh {
  // background:#f4f4f4;
  margin-bottom: 1rem;
}
.shopBox {
  width: 100%;
  min-height: calc(100vh);
  //   background: #f4f4f4;
}

.shopBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: center;
}
.shopBox .list {
  width: calc((100vw / 2) - 4%);
  padding: 0;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 2%;
  margin-bottom: 2%;
  border-radius: 0.16rem;
  box-shadow: 0px 0px 0.16rem 0px rgba(202, 202, 202, 0.66);
}
.shopBox .list img {
  width: 100%;
}

.shopBox .list h3 {
  // height: 0.6rem;
  font-size: 0.38rem;
  height: 1rem;
  line-height: 0.5rem;
  color: #2e464f;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.shopBox .list p {
  font-size: 0.38rem;
  height: 0.8rem;
  color: #e94757;
  padding-left: 0.1rem;
}
.shopBox .list p u {
  margin-left: 0.3rem;
  text-decoration: line-through;
  color: #948b8a;
}
.shopBox .list .van-icon {
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
  font-size: 0.8rem;
}

.van-action-bar {
  bottom: 2rem;
  right: 0.1rem;
  left: initial;
  min-width: var(--van-action-bar-icon-width);
  background: none;
}
.van-action-bar .van-action-bar-icon {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0.15rem;
  font-size: 0.3rem;
  border-radius: var(--van-action-bar-icon-width);
}
.van-action-bar .van-action-bar-icon /deep/ .van-action-bar-icon__icon {
  color: #fff;
  font-size: 0.6rem;
}
</style>
